<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI易经出行</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main-frame">
      <div class="canvas" id="top-canvas"></div>
      <div class="canvas" id="middle-canvas"></div>
      <div class="canvas" id="bottom-canvas"></div>
      <div class="canvas" id="function-canvas">
        <input
          type="text"
          id="info-input"
          placeholder="请输入推演信息,如:姓名 昵称 出生年月 手机号 QQ号等"
        />
        <button id="info-button">开 始 推 演</button>
      </div>
      <div class="canvas" id="bottom-border-canvas"></div>
      <div class="message" id="message-top">抬头见喜</div>
      <div class="message" id="message-bottom">低头遇福</div>
      <div class="time" id="ntpc-time"></div>
      <div class="time" id="n-lunar"></div>
      <div class="time" id="n-ji"></div>
      <div class="time" id="n-shi-chen"></div>
      <div class="direction" id="n">北</div>
      <div class="direction" id="s">南</div>
      <div class="direction" id="w">西</div>
      <div class="direction" id="e">东</div>
      <div class="direction" id="wn">西北</div>
      <div class="direction" id="en">东北</div>
      <div class="direction" id="ws">西南</div>
      <div class="direction" id="es">东南</div>
      <div class="direction-info" id="n-info">
        <span id="n-jx"></span><br /><span id="n-info-text"></span>
      </div>
      <div class="direction-info" id="s-info">
        <span id="s-jx"></span><br /><span id="s-info-text"></span>
      </div>
      <div class="direction-info" id="w-info">
        <span id="w-jx"></span><br /><span id="w-info-text"></span>
      </div>
      <div class="direction-info" id="e-info">
        <span id="e-jx"></span><br /><span id="e-info-text"></span>
      </div>
      <div class="direction-info" id="wn-info">
        <span id="wn-jx"></span><br /><span id="wn-info-text"></span>
      </div>
      <div class="direction-info" id="en-info">
        <span id="en-jx"></span><br /><span id="en-info-text"></span>
      </div>
      <div class="direction-info" id="ws-info">
        <span id="ws-jx"></span><br /><span id="ws-info-text"></span>
      </div>
      <div class="direction-info" id="es-info">
        <span id="es-jx"></span><br /><span id="es-info-text"></span>
      </div>
    </div>
    <script src="script.js"></script>
    <script>
      // 确保time变量只声明一次
      var time_only_one = new Date();

      function init_tile() {
        const now = new Date();
        now.setHours(now.getHours() + 8); // 添加8个小时
        time_only_one = now.toISOString().slice(0, 19).replace("T", " ");
        const date = new Date(time_only_one);
        const hour = date.getHours();
        const minute = date.getMinutes();
        const chineseTime = convertToChineseTime(hour, minute);

        // 使用time变量
        document.getElementById("n-lunar").textContent = time_only_one;
        document.getElementById("n-shi-chen").textContent = chineseTime;
      }

      window.onload = function () {
        init_tile();
        aiYiJingChuXing(time_only_one);

        document
          .getElementById("info-button")
          .addEventListener("click", function () {
            init_tile();
            aiYiJingChuXing(time_only_one);
          });
      };
    </script>
  </body>
</html>
